<!--
 * @Author: your name
 * @Date: 2020-10-15 13:36:31
 * @LastEditTime: 2021-02-24 16:53:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \sende_nuxt\components\home\OurStory.vue
-->
<template>
  <div class="w1200auto OurStory mb70">
    <img
      class="OurStory_bg"
      :src="require('~/assets/image/home/better_glass.jpg')"
      alt=""
    />
    <div class="OurStory_tip mtb20">
      <h3 class="OurStory_title pl40">Why GlassesUSA.com?</h3>
      <ul class="OurStory_ul pt40 plr40">
        <li class="li pl70 mb20">
            <!-- <img
                class="img"
                src="http://www.eyecedar.com/media/wysiwyg/img_element/icon_2.PNG"
                alt=""
            /> -->
            <i class="iconfont icon-wuliuxinxi"></i>
            <div class="box">
                <div class="box_title">{{$t("Free shipping")}} & {{$t("returns")}}</div>
                <div class="box_txt ptb10">{{$t("Standard manufactuer's warranty")}}.</div>
            </div>
        </li>
        <li class="li pl70 mb20">
            <!-- <img
                class="img"
                src="http://www.eyecedar.com/media/wysiwyg/img_element/icon_2.PNG"
                alt=""
            /> -->
            <i class="iconfont icon-meiyuan5"></i>
            <div class="box">
                <div class="box_title">{{$t("Free shipping")}} & {{$t("returns")}}</div>
                <div class="box_txt ptb10">{{$t("Standard manufactuer's warranty")}}.</div>
            </div>
        </li>
        <li class="li pl70 mb20">
            <!-- <img
                class="img"
                src="http://www.eyecedar.com/media/wysiwyg/img_element/icon_2.PNG"
                alt=""
            /> -->
            <i class="iconfont icon-rili1"></i>
            <div class="box">
                <div class="box_title">{{$t("365-day warranty")}}</div>
                <div class="box_txt ptb10">{{$t("Standard manufactuer's warranty")}}.</div>
            </div>
        </li>
      </ul>
      <nuxt-link to="/brand-story" class="OurStory_btn mlr40">{{$t("Our Story")}}</nuxt-link>
      <div class="OurStory_star ptb30">
        <div class="star mr10">
          <img class="img" v-lazy="require('~/assets/image/star.png')" alt="" />
          <img class="img" v-lazy="require('~/assets/image/star.png')" alt="" />
          <img class="img" v-lazy="require('~/assets/image/star.png')" alt="" />
          <img class="img" v-lazy="require('~/assets/image/star.png')" alt="" />
          <img class="img" v-lazy="require('~/assets/image/star.png')" alt="" />
        </div>
        <p class="txt">Over 30,000+ {{$t("reviews")}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
@import "~/assets/scss/index.scss";
.OurStory {
  position: relative;
  @include flex-center(flex-end);
  // height: 500px;
  &_bg {
    position: absolute;
    top: 0;
    right: 0;
    width: $s100;
    height: $s100;
  }
  &_tip {
    position: relative;
    background: #fff;
    border-radius: 10px;
    width:400px;
    margin-right: 15px;
  }
  &_title {
    color: $theme;
    font-size: 24px;
    font-weight: bold;
    border-bottom: 1px solid $ddd;
    padding-top: 25px;
    padding-bottom: 25px;
  }
  &_ul {
    @include flex(column);
    .li {
        width: $s100;
        box-sizing: border-box;
        position: relative;
        @include flex-center(center);
        .img {
            position: absolute;
            left: 0;
            top: 0;
            width: 35px;
            height: 32px;
        }
        .iconfont {
          position: absolute;
          left: 0;
          top: 0;
          font-size: 40px;
        }
        .box {
            @include flex(column);
            justify-content: flex-start;
            width: $s100;
            &_title {
                @include ellipsis();
                font-size: 16px;
            }
            &_txt {
                @include ellipsis();
                font-size: 14px;
                color: $c999;
            }
        }
    }
  }
  &_btn {
      background: $theme;
      padding: 15px 0;
      display: block;
      text-align: center;
      color: #fff;
      font-weight: bold;
      border-radius: 20px;
      font-size: 18px;
  }
  &_star {
      @include flex-center(center);
      .star {
        @include flex();
        .img {
            width: 15px;
            height: 15px;
            margin-right: 5px;
            &:last-child {
                margin-right: 0;
            }
        }
      }
      .txt {
        color: $c999;
        font-size: 12px;
      }
  }
}
</style>